<form class="pure-form">
	<fieldset>
		<legend>
			Search
		</legend>
		<input type="text" id="search" class="pure-input-rounded" size="100">
		
		<a class="pure-button" href="<?php echo URL; ?>index/search">Advanced Search</a>
	</fieldset>
</form>

<div class="items">
	<table class="pure-table">
		<thead>
			<tr>
				<th>#</th>
				<th onclick="sortByCategory()"><a href="#">Category</a></th>
				<th onclick="sortByName()"><a href="#">Name</a></th>
				<th onclick="sortByPrice()"><a href="#">Price</a></th>
				<th>Overview</th>
				<th>Date</th>
				<th></th>
			</tr>
		</thead>

		<tbody id="tableBady">

		</tbody>
	</table>
	<ul class="pure-paginator" id="pages"></ul>
</div>

<script>
    var category =<?php echo $this->categories?>;
	var allItems =  <?php echo $this->items?>;
	var itemsPerPage = 20;
	var numOfPages;
	var currentPage = 0;
	
	var items = allItems;

	function isOdd(num) {
		return num % 2;
	}
	
	function getCategoryNameById( id){
	    for (var i=0; i < category.length; i++)
	       if ( category[i].id == id ) return category[i].name;
	}

	function createTableRow(item, num) {
	    var str = "";
	    
	    if (isOdd(num))
                str += '<tr class="pure-table-odd">';
            else
                str += '<tr>';
                
		str += '<td>' + (num + 1) + '</td>';
		str += '<td>' + getCategoryNameById(item.categoryId)+'</td>';
		str += '<td>' + item.name + '</td>';
		str += '<td>' + item.price + '</td>';
		str += '<td>' + item.overview + '</td>';
		str += '<td>' + item.date + '</td>';
		str += '<td><a href="<?php echo URL; ?>index/view">View</a></td>';
		
		str += '</tr>';
		return str;
	}
	
	function min( a, b)
	{
	    return a < b ? a : b;
	}

	function setItems(num) {
		var str = "";
		currentPage = num;
		$('#pages').empty();
		str = '<li><a class="pure-button prev" href="#" onclick="prev()">&#171;</a></li>';
        numOfPages = Math.ceil(items.length / itemsPerPage);
        for (var j = 0; j < numOfPages; j++){
            if ( currentPage == j) str += '<li><a class="pure-button pure-button-active" href="#" onclick="setItems('+j+')">' + (j + 1) + '</a></li>';
            else str += '<li><a class="pure-button" href="#" onclick="setItems('+j+')">' + (j + 1) + '</a></li>';
        }
        str += '<li><a class="pure-button next" href="#" onclick="next()">&#187;</a></li>';

        $('#pages').append(str);
        
        str = '';
		$('#tableBady').empty();
		var stopAt = min(num * itemsPerPage + itemsPerPage, items.length);
		

		for (var j = num * itemsPerPage; j < stopAt; j++)
			str += createTableRow( items[j], j);

		$('#tableBady').append(str);

	}


	$(document).ready(function() {

		var str = "";

		for (var i = 0; i < category.length; i++)
			str += '<option value="' + category[i].id + '">' + category[i].name + '</option>';

		$('#category').append(str);

		

		setItems(0);
	});
	
	$('#search').keyup(function() {
        var tmpArr = new Array();
        var value = $('#search').val();
        var index = 0;
        
        for ( var i = 0; i < allItems.length; i++)
        {
            if ( allItems[i].name.indexOf(value) != -1)
                tmpArr[index++] = allItems[i];
        }
        items = tmpArr;
        setItems( 0);
        
        return false;
    });
    
    function next(){
        if ( currentPage < numOfPages-1)
        {
            setItems( currentPage+1);
        }
    }
    
    function prev(){
        if ( currentPage > 0)
        {
            setItems( currentPage-1);
        }
    }
    
    function comparePrice(a,b) 
    {
        a = parseFloat(a.price);
        b = parseFloat(b.price);
          if (a < b)
             return -1;
          if (a > b)
            return 1;
          return 0;
      }
      
    function sortByPrice()
    {
        items.sort(comparePrice);
        setItems(currentPage);
    }
    
    function compareName(a,b) 
    {
        a = a.name, b = b.name;
        for (var i=0,n=Math.max(a.length, b.length); i<n && a.charAt(i) === b.charAt(i); ++i);
            if (i === n) return 0;
        return a.charAt(i) > b.charAt(i) ? 1 : -1;
      }
      
    function sortByName()
    {
        items.sort(compareName);
        setItems(currentPage);
    }
    
    function compareCategory(a,b) 
    {
         a = parseInt(a.categoryId);
         b = parseInt(b.categoryId);
          if (a < b)
             return -1;
          if (a > b)
            return 1;
          return 0;
      }
      
    function sortByCategory()
    {
        items.sort(compareCategory);
        setItems(currentPage);
    }
</script>